<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Beebud</title>
  <link rel="stylesheet" href="./css/common.css">
  <link rel="shortcut icon" href="./logo.png" type="image/x-icon">
  <style>
    main {
      width: 1200px;
      margin: 20px auto;
      padding: 20px;
      background-color: #fff;
    }

    .login-title h3 {
      text-align: center;
      margin-bottom: 12px;
    }

    .login-title {
      text-align: center;
    }

    .login-title p {
      color: rgba(0, 0, 0, 0.65);
    }

    .form-item {
      text-align: center;
    }

    .form-item input {
      margin-top: 20px;
      width: 300px;
      background-color: #fff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      display: inline-flex;
      font-size: 16px;
      min-height: 44px;
      transition: border .24s cubic-bezier(.22, 0, .08, 1);
      padding: 0 16px;
      outline: none;
    }

    .login-btn {
      width: 200px;
      margin-top: 20px;
      height: 44px;
      border-radius: 20px;
      background-color: #ff5b00;
      color: #fff;
      border: none;
      font-size: 20px;
      font-weight: 500;
    }
  </style>
</head>

<body>
  <div id="app">
    <header>
      <div class="header-wrapper">
        <div class="logo"><a href="./index.html"><img src="./img/logo.png" alt=""></a>
        </div>
        <!--<div class="search-wrapper">-->
        <!--  <input type="text" placeholder="登录搜索更多内容">-->
        <!--  <?xml version="1.0" encoding="UTF-8"?><svg width="14" height="14" viewBox="0 0 48 48" fill="none"-->
        <!--    xmlns="http://www.w3.org/2000/svg">-->
        <!--    <path-->
        <!--      d="M21 38C30.3888 38 38 30.3888 38 21C38 11.6112 30.3888 4 21 4C11.6112 4 4 11.6112 4 21C4 30.3888 11.6112 38 21 38Z"-->
        <!--      fill="none" stroke="#000" stroke-width="4" stroke-linejoin="round" />-->
        <!--    <path d="M26.657 14.3431C25.2093 12.8954 23.2093 12 21.0001 12C18.791 12 16.791 12.8954 15.3433 14.3431"-->
        <!--      stroke="#000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />-->
        <!--    <path d="M33.2216 33.2217L41.7069 41.707" stroke="#000" stroke-width="4" stroke-linecap="round"-->
        <!--      stroke-linejoin="round" />-->
        <!--  </svg>-->
        <!--</div>-->
        <div class="nav-wrapper">
          <span><a href="./about.html">关于我们</a> </span>
          <span><a href="./concatUs.html">联系我们</a> </span>
          <span><a href="./help.html" class="help-a">服务与帮助</a> </span>
        </div>
        <div class="login-register">
          <span><a href="./register.html">注册</a></span>
          <button><a href="./login.html">登录</a></button>
        </div>
      </div>
    </header>
    <main>
      <div class="login-title">
        <h3>注册</h3>
        <p>通过未注册的手机号或第三方帐号创建Beebud帐号</p>
      </div>
      <div class="form-item">
        <input type="text" v-model="phone" placeholder="请输入手机号" maxlength="11" />
      </div>
      <div class="form-item">
        <input type="text" v-model="nickname" placeholder="请输入昵称" />
      </div>
      <div class="form-item">
        <input type="password" v-model="password" placeholder="请输入密码" />
      </div>
      <div class="form-item">
        <input type="password" v-model="rePassword" placeholder="再次确认密码" />
      </div>
      <div class="form-item">
        <button class="login-btn" @click="registerHandle">注册</button>
      </div>
      <div class="form-item" style="margin-top: 20px;">
        <p>已有账号？<a href="./login.html">去登录</a></p>
      </div>
    </main>
    <footer>
      <div class="footer-wrapper">
        <div>
          <span>上海灼蕾网络科技有限公司</span>
          <span style="margin-left: 20px;"><a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank"
              rel="noopener noreferrer">沪ICP备2024048955号-1</a> </span>
        </div>
        <div>
          <span>地址：上海市奉贤区南桥镇西闸公路1036号3幢2层</span>
        </div>
      </div>
    </footer>
  </div>
  <script src="./js/vue.min.js"></script>
  <script src="./js/common.js"></script>
  <script>
    new Vue({
      el: "#app",
      data() {
        return {
          phone: "",
          nickname: "",
          password: "",
          rePassword: ""
        }
      },
      methods: {
        async registerHandle() {
          const reg = /^(?:(?:\+|00)86)?1\d{10}$/;
          if (!reg.test(this.phone)) {
            toast("请输入正确的手机号")
            return
          }
          if (!this.nickname) {
            toast("请输入昵称")
            return;
          }
          if (!this.password) {
            toast("请输入密码")
            return
          }
          if (this.password !== this.rePassword) {
            toast("两次密码不一致")
            return
          }
          const res = await request('/web/user/register', 'post', {
            phone: this.phone,
            nickname: this.nickname,
            password: this.password
          })
          if (res.code == 0) {
            toast("注册成功")
            window.location.href = "./login.html"
          }
          toast(res.message)
        }
      }
    })
  </script>
</body>

</html>